<template>
    <div class="hFull flex column loginBg">
        <div class="top">
<div class="topTxt">学生端</div>
</div>
        <div class="equal pra">
            <div class="sucBox">
                <div class="subDiv">
                    <div class="pop radius">
                        <div class="fz28 mb20">登录</div>
                        <div class="box">
                            <div class="mb10">
                                <div class="userIn">
                                    <div class="user"></div>
                                    <div class="fzGrey16">用户名</div>
                                </div>
                                <div class="am_input"><input v-model.trim="form.username" type="name" placeholder="" value=""></div>
                            </div>
                            <div class="mb10">
                                <div class="userIn">
                                    <div class="key"></div>
                                    <div class="fzGrey16">密 码</div>
                                </div>
                                <div class="am_input"><input v-model.trim="form.password" type="password" placeholder="" value=""></div>
                            </div>
                        </div>
                        <div class="logBtn"><a class="button" @click="onSubmit()"><span>登录</span></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="css">
body{background: url(../assets/images/loginBg.png) no-repeat center center; background-size: 100% 100%;}
.top{background:rgba(255,255,255,.5);  height: .7rem; padding: 0 .3rem; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative;}
.topTxt{  font-size: .18rem; color:#0F1011;  line-height: .7rem;}

.loginBg{  width: 100%; height: 100%; position: relative;}
.sucBox{position: fixed; left: 0; top: 0;z-index: 10; width: 100%;height: 100%;display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center;}
.subDiv{width: 3.0rem; position: absolute; top: 50%; left: 50%; margin-top: -1.8rem;  margin-left: -1.5rem;}
.pop{ min-height: 2.5rem;  border-radius: .2rem; background-color: #fff; margin: auto; overflow: hidden; position: relative; z-index: 9; padding: .4rem .4rem;}

.radius{ border-radius: .1rem;}
.userIn{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-item-align: stretch; align-self: stretch;margin-bottom: .05rem;}
.am_input{font-size: 0.2rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #F0EFF2; border-radius: .15rem; padding: 0 .2rem;}
.am_input input{color: #ddd; font-size: 0.2rem; -webkit-appearance: none;  -moz-appearance: none; appearance: none; width: 100%; padding: .05rem 0; border: 0;  background-color: transparent;  box-sizing: border-box;}
.user{ width: .24rem; height: .24rem; display: inline-block; background: url(../assets/images/user.png) no-repeat; background-size: 100%; margin-right: .1rem; margin-top: auto;}
.key{ width: .24rem; height: .24rem; display: inline-block; background: url(../assets/images/key.png) no-repeat; background-size: 100%; margin-right: .1rem; margin-top: auto;}
.logBtn{ padding-top: .2rem;}
.button{display: block; outline: 0 none; -webkit-appearance: none; box-sizing: border-box; padding: 0;  text-align: center; font-size: .20rem; height: .40rem; line-height: .40rem; text-overflow: ellipsis;  word-break: break-word; white-space: nowrap; color: #fff; background-color: #FFC142; border-radius: .15rem;  cursor: pointer;}
</style>

<script>
export default {
    data(){
        return {
            form:{
                "username":"",
                "password":"",
                "regionId":"1"
            }
        }
},
    methods: {
        onSubmit() {
            let formData = JSON.stringify(this.form);
            this.$api.user.login(
                formData
            ).then(res=> { 
                if(res.data.status == 1){
                    this.$router.push("part")
                }else if(res.data.status == 0){
                    alert(res.data.msg)
                }
            });
        }
    }
}
</script>